<template>
  <div>
    <button @click="flag = !flag">按钮</button>
    <!-- 就地复用 key  -->
    <!-- :属性名="变量" -->
    <!-- 属性名="字符串" -->
    <input
      type="text"
      placeholder="请输入用户名"
      key="1"
      :a="'b'"
      v-if="flag"
    />
    <input type="text" placeholder="请输入密码" key="2" v-else />

    <input type="checkbox" v-model="flag" />

    <input type="checkbox" name="" id="" v-model="arr" value="a" />
    <input type="checkbox" name="" id="" v-model="arr" value="b" />
    <input type="checkbox" name="" id="" v-model="arr" value="c" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      a: 1,
      b: 2,
      arr: [],
    };
  },
};
</script>

<style scoped></style>
<style scoped>

</style>